<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="顾客名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入顾客名称" clearable style="width: 200px"
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="联系方式" prop="phonenumber">
            <el-input v-model="queryParams.phonenumber" placeholder="请输入联系方式" clearable style="width: 200px"
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="状态" prop="delFlag">
            <el-select v-model="queryParams.delFlag" placeholder="顾客状态" clearable style="width: 200px">
               <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5"></el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="顾客名称" align="center" prop="userName" />
         <el-table-column label="国际区号" align="center" prop="countryCode" />
         <el-table-column label="联系方式" align="center" prop="phonenumber" />
         <el-table-column label="性别" align="center" prop="sex">
            <template #default="scope">
               <dict-tag :options="sys_user_sex" :value="scope.row.sex" />
            </template>
         </el-table-column>
         <el-table-column label="最近登录IP" align="center" prop="loginIp" />
         <el-table-column label="最近登录时间" align="center" prop="loginDate" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.loginDate) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="钱包状态" align="center" prop="wallet.useFlag">
            <template #default="scope">
               <el-tag type="success" v-if="scope.row.wallet.useFlag == true">正常</el-tag>
               <el-tag type="danger" v-if="scope.row.wallet.useFlag == false">禁用</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="用户余额" align="center" prop="wallet.balance">
            <template #default="scope">
               <span v-if="scope.row.wallet.balance != undefined">￥{{ scope.row.wallet.balance / 100 }}</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column label="用户积分" align="center" prop="wallet.coins">
            <template #default="scope">
               <span v-if="scope.row.wallet.coins != undefined">{{ scope.row.wallet.coins }}</span>
               <span v-else>-</span>
            </template>
         </el-table-column>
         <el-table-column label="状态" align="center" prop="delFlag">
            <template #default="scope">
               <dict-tag :options="sys_normal_disable" :value="scope.row.delFlag" />
            </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdateBal(scope.row)"
                  v-hasPermi="['customer:edit:balance']">余额更新</el-button>
               <el-button link type="primary" icon="Edit" @click="handleUpdateCoins(scope.row)"
                  v-hasPermi="['customer:edit:coins']">积分更新</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
         @pagination="getList" />
   </div>
</template>

<script setup name="Customer">
import { listCustomer, getCustomer, updateBal, updateCoins } from "@/api/system/customer";
import { ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance();
const { sys_user_sex, sys_normal_disable } = proxy.useDict("sys_user_sex", "sys_normal_disable");

const customerList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      userName: undefined,
      phonenumber: undefined,
      delFlag: undefined
   },
});

const { queryParams } = toRefs(data);

/** 查询顾客列表 */
function getList() {
   loading.value = true;
   listCustomer(queryParams.value).then(response => {
      customerList.value = response.rows;
      total.value = response.total;
      loading.value = false;
   });
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
}
function handleUpdateBal(row) {
   ElMessageBox.prompt('', '请输入用户余额', {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      closeOnClickModal: false,
      inputValidator: function (value) {
         if (!/-?[1-9]\d*/.test(value)) {
            return false
         } else {
            return true
         }
      },
      inputErrorMessage: "用户余额只能为数字",
   })
      .then(({ value }) => {
         return updateBal(row.userId, value)
      })
      .then(() => {
         proxy.$modal.msgSuccess("设置成功");
         handleLeakElec(sn)
      })
      .catch(() => { });
}
function handleUpdateCoins(row) {
   ElMessageBox.prompt('', '请输入用户积分', {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      closeOnClickModal: false,
      inputValidator: function (value) {
         if (!/-?[1-9]\d*/.test(value)) {
            return false
         } else {
            return true
         }
      },
      inputErrorMessage: "用户积分只能为数字",
   })
      .then(({ value }) => {
         return updateCoins(row.userId, value)
      })
      .then(() => {
         proxy.$modal.msgSuccess("设置成功");
         handleLeakElec(sn)
      })
      .catch(() => { });
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.customerId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
}

getList();
</script>
